<template>
  <div class="cqjc-chart" ref="chartDom">QW</div>
</template>
<script setup>
import { reactive, onMounted, watch, ref, toRaw } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  sourceData: {
    type: Array,
    default: () => []
  }
})

const chartDom = ref(null)
let myChart
const echartsInit = () => {
  myChart = echarts.init(chartDom.value)
}
const echartsetOption = (tempHigh, tempLow) => {
  let option = {
    grid: {
      left: 20,
      right: 20,
      bottom: 0
    },
    xAxis: {
      show: false,
      type: 'category',
      boundaryGap: false
    },
    yAxis: {
      show: false,
      type: 'value',
      boundaryGap: false
    },
    series: [
      {
        type: 'line',
        stack: 'Total',
        data: tempLow,
        itemStyle: {
          normal: {
            label: {
              show: true
            }
          }
        }
      },
      {
        type: 'line',
        stack: 'Total',
        data: tempHigh,
        itemStyle: {
          normal: {
            label: {
              show: true
            }
          }
        }
      }
    ]
  }
  if (myChart) {
    myChart.clear()
    myChart.setOption(option)
  }
}
onMounted(() => {
  echartsInit()
})

watch(
  () => props.sourceData,
  (newValue) => {
    const tempHighArr = newValue.map((item) => item.tempHigh)
    const tempLowArr = newValue.map((item) => item.tempLow)
    myChart && echartsetOption(tempHighArr, tempLowArr)
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
.cqjc-chart {
  width: 100%;
  height: 100%;
}
</style>
